/* * @moudule:@/views/home/incomeVip * @author:zm * @date:2020-11-17 * */

<template>
  <div class="productView_container">
    <header>
      <p v-if="formInline.attrType == 1">政企客户属性</p>
      <p v-if="formInline.attrType == 2">政企服务属性</p>
    </header>
    <main>
      <el-form
        :inline="true"
        :model="formInline"
        class="main_searchBar"
        ref="form"
      >
        <el-form-item label="区域:">
          <dx-cascader
            :area_id.sync="formInline.areaId"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item
          label="年份:"
          v-if="tabActive == 'list2'"
        >
          <el-date-picker
            size="mini"
            @change="formInline.indexCode = null"
            v-model="formInline.month"
            value-format="yyyy"
            type="year"
            placeholder="选择年"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="账期:"
          v-if="tabActive == 'list1'"
        >
          <el-date-picker
            size="mini"
            @change="formInline.indexCode = null"
            v-model="formInline.month"
            value-format="yyyyMM"
            format="yyyyMM"
            type="month"
            placeholder="选择月"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="政企属性:">
          <el-select
            size="mini"
            v-model="formInline.attrType"
            @change="selectChange"
          >
            <el-option
              v-for="(item, index) in sxList"
              :key="index"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="行业类型:"
          v-show="formInline.attrType == 2"
        >
          <el-select
            size="mini"
            v-model="formInline.hsxType"
          >
            <el-option
              v-for="(item, index) in hylxList"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="指标:"
          v-if="tabActive == 'list2'"
        >
          <el-select
            size="mini"
            v-model="formInline.indexCode"
          >
            <el-option
              v-for="(item, index) in zbList"
              :key="index"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计类型:">
          <el-select
            size="mini"
            v-model="formInline.statisticalType"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="客户经理名称:"
          v-if="
            formInline.statisticalType == 'VIP' ||
            formInline.statisticalType == '客户经理'
          "
        >
          <el-input
            placeholder="请输入"
            v-model="formInline.manageName"
            size="mini"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            id="search_btn"
            @click="handle_search"
          >查询</el-button>
          <el-button
            size="mini"
            id="export_btn"
            @click="handle_export"
          >导出</el-button>
        </el-form-item>
      </el-form>
      <div class="tables">
        <el-tabs
          v-model="tabActive"
          type="card"
          style="margin-top: 10px"
          @tab-click="handleTabClick(tabActive)"
        >
          <el-tab-pane
            label="汇总表"
            name="list1"
          >
            <div class="main_navBar">
              <div class="area">
                <div
                  class="it"
                  v-for="(item, index) in areaList"
                  :key="index"
                  @click="changeArea(item)"
                >
                  <span class="td">{{ item.label }}</span>
                  <span>-></span>
                </div>
              </div>
            </div>

            <ux-grid
              ref="table1"
              :height="height"
              size="mini"
              show-overflow="tooltip"
              widthResize
              header-row-class-name="headerStyle"
              v-loading="showTableLoading"
              id="table1"
            >
              <ux-table-column
                type="index"
                width="60"
                title="序号"
                fixed="left"
                align="center"
              />
              <ux-table-column
                title="区域"
                width="160"
                fixed="left"
              >
                <template slot-scope="{ row }">
                  <span
                    :class="[areaFlag == '1' ? 'hover' : 'clearHover']"
                    @click="goArea(row)"
                  >{{ row.area_NAME }}</span>
                </template>
              </ux-table-column>

              <ux-table-column
                field="p_AREA_NAME"
                title="支局名称"
                min-width="120"
                v-if="isShow"
              ></ux-table-column>

              <ux-table-column
                field="hsx_TYPE"
                title="行业类型"
                min-width="120"
                v-if="isShowManName"
              ></ux-table-column>
              <ux-table-column
                field="manager_NAME"
                title="客户经理名称"
                min-width="120"
                v-if="isShowManName"
              ></ux-table-column>
              <ux-table-column
                field="vip_NBR"
                title="VIP卡号/客户名称"
                min-width="120"
                v-if="isShowVip"
              ></ux-table-column>
              <ux-table-column
                field="vip_NAME"
                title="VIP名称"
                min-width="150"
                v-if="isShowVip"
              ></ux-table-column>
              <ux-table-column
                field="assets_ID"
                title="资产"
                min-width="120"
                v-if="isShowZc"
              />
              <ux-table-column
                :field="item.field"
                :title="item.title"
                :min-width="item.minWidth"
                :sortable="item.sortable"
                v-for="(item, index) in list1Colums"
                :key="index"
              ></ux-table-column>
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="steplast_PERIOD"
                title="台阶收入上年累计"
                min-width="140"
              />
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="stepindex_VALUE"
                title="台阶收入本年累计"
                min-width="140"
              />
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="stepincomb"
                title="台阶收入同比变化"
                min-width="140"
              />
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="stepincrease"
                title="台阶收入同比增长率"
                min-width="140"
              />

              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="cylast_PERIOD"
                title="产业数字化上年累计"
                min-width="140"
              />
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="cyindex_VALUE"
                title="产业数字化本年累计"
                min-width="140"
              />
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="cyincomb"
                title="产业数字化同比变化"
                min-width="140"
              />
              <ux-table-column
                v-if="accountInfo.areaId == 5"
                field="cyincrease"
                title="产业数字化同比增长率"
                min-width="140"
              />
            </ux-grid>
          </el-tab-pane>

          <el-tab-pane
            label="分月趋势报表"
            name="list2"
          >
            <div class="main_navBar">
              <div class="area">
                <div
                  class="it"
                  v-for="(item, index) in areaList2"
                  :key="index"
                  @click="changeArea(item)"
                >
                  <span class="td">{{ item.label }}</span>
                  <span>-></span>
                </div>
              </div>
            </div>

            <ux-grid
              ref="table2"
              :height="height"
              size="mini"
              show-overflow="tooltip"
              widthResize
              header-row-class-name="headerStyle"
              v-loading="showTableLoading"
              id="table2"
            >
              <ux-table-column
                type="index"
                width="60"
                title="序号"
                fixed="left"
                align="center"
              />
              <ux-table-column
                title="区域"
                width="160"
              >
                <template slot-scope="{ row }">
                  <span
                    :class="[areaFlag2 == '1' ? 'hover' : 'clearHover']"
                    @click="goArea(row)"
                  >{{ row.parentName || row.areaName }}</span>
                </template>
              </ux-table-column>
              <!-- <ux-table-column field="parentName" title="区域名称" min-width="100" fixed></ux-table-column> -->
              <ux-table-column
                field="areaName"
                title="支局名称"
                min-width="120"
                fixed
                v-if="isShow2"
              ></ux-table-column>
              <ux-table-column
                field="hsxType"
                title="行业类型"
                min-width="120"
                v-if="isShowManName2"
              ></ux-table-column>
              <ux-table-column
                field="manageName"
                title="客户经理名称"
                min-width="100"
                v-if="isShowManName2"
              ></ux-table-column>
              <ux-table-column
                field="vipNbr"
                title="VIP卡号"
                min-width="120"
                v-if="isShowVip2"
              ></ux-table-column>
              <ux-table-column
                field="vipName"
                title="VIP名称/客户名称"
                min-width="140"
                v-if="isShowVip2"
              ></ux-table-column>
              <ux-table-column
                field="assetsId"
                title="资产"
                min-width="120"
                v-if="isShowZc2"
              />
              <ux-table-column
                field="indexCode"
                title="指标"
                min-width="100"
              ></ux-table-column>
              <ux-table-column
                v-for="(item, index) in monthList"
                :field="item.value"
                :title="item.name"
                :key="index"
                min-width="100"
                sortable
              ></ux-table-column>
            </ux-grid>
            <div style="display:flex;justify-content: flex-end;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[100, 150, 200, 250]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </main>
    <!-- <EditModal ref="editModal"></EditModal> -->
  </div>
</template>

<script>
import { downLoadTemplate } from "@/utils/zipdownload"
import { $budgetAPI, $budget } from "@/api";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
import qs from "qs";
import { getCookie } from "@/common/js/cookie";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import { incomeVipList1Columns } from "./columns";

export default {
  components: {
    // EditModal,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 100,
      total: 0,
      list1Colums: incomeVipList1Columns,
      tabActive: "list1",
      formInline: {
        areaId: "", //区域ID *
        areaLvl: "",
        month: "", //账期 *
        attrType: 2, //政企属性 *
        hsxType: "", //行业类型
        hsxLine: "", //
        manageName: "", //客户经理
        vipNbr: "", //
        assets: "", //
        areaFlag: 0,
        indexCode: "YS10000", //指标
        statisticalType: "",
      },
      areaFlag: "0",
      areaFlag2: "0",
      areaList: [],
      areaList2: [],
      hylxList: [
        {
          name: "行客",
        },
        {
          name: "商客",
        },
        {
          name: "校园",
        },
        {
          name: "其他",
        },
      ],

      sxList: [
        {
          name: "政企服务属性",
          value: 2,
        },
        {
          name: "政企客户属性",
          value: 1,
        },
      ],
      typeList: ["县分", "支局", "客户经理", "VIP"],
      //指标列表
      monthList: [],
      tableData1: [],
      tableData2: [],
      showTableLoading: false,
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
      height: "",

      isShow: false,
      isShowCustomer: false,
      isShowManName: false,
      isShowVip: false,
      isShowZc: false,

      isShow2: false,
      isShowCustomer2: false,
      isShowManName2: false,
      isShowVip2: false,
      isShowZc2: false,

      hsxType_show: true,
      exportParams1: {},
      exportParams2: {},
    };
  },
  computed: {
    zbList(){
      const { month } = this.formInline;
      if(month < "2023"){
        return [
          {
            name: "主营业务收入",
            value: "YS10000",
          },
          {
            name: "基本面收入合计",
            value: "YS10023",
          },
          {
            name: "移动收入(不含ICT)",
            value: "YS10025",
          },
          {
            name: "宽带收入",
            value: "YS10033",
          },
          {
            name: "互联网专线",
            value: "YS10034",
          },
          {
            name: "天翼高清收入",
            value: "YS10036",
          },
          {
            name: "固话收入",
            value: "YS10039",
          },
          {
            name: "组网专线",
            value: "YS10043",
          },
          {
            name: "ICT/IDC合计",
            value: "YS10049",
          },
          {
            name: "码号收入",
            value: "YS10077",
          },
          {
            name: "专线收入",
            value: "YS10101",
          },
          {
            name: "台阶收入",
            value: "YS10091",
          },
          {
            name: "产业数字化",
            value: "YS10096",
          },
          {
            name: "双清单产品收入",
            value: "YS10133",
          },
          {
            name: "标准产品收入",
            value: "YS10134",
          },
          {
            name: "数字产品收入",
            value: "YS10135",
          },
        ];
      } else return [
        {
          name: "主营业务收入",
          value: "YS10000",
        },
        {
          name: "基本面收入合计",
          value: "YS10023",
        },
        {
          name: "移动收入(不含ICT)",
          value: "YS10025",
        },
        {
          name: "宽带收入",
          value: "YS10033",
        },
        {
          name: "互联网专线",
          value: "YS10034",
        },
        {
          name: "天翼高清收入",
          value: "YS10036",
        },
        {
          name: "固话收入",
          value: "YS10039",
        },
        {
          name: "组网专线",
          value: "YS10043",
        },
        {
          name: "ICT/IDC合计",
          value: "YS10123",
        },
        {
          name: "码号收入",
          value: "YS10077",
        },
        {
          name: "专线收入",
          value: "YS10101",
        },
        {
          name: "台阶收入",
          value: "YS10091",
        },
        {
          name: "产业数字化",
          value: "YS10251",
        },
        {
          name: "双清单产品收入",
          value: "YS10133",
        },
        {
          name: "标准产品收入",
          value: "YS10134",
        },
        {
          name: "数字产品收入",
          value: "YS10135",
        },
      ];
    }
  },
  mounted() {
    this.getHeight();
  },

  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;

    let f = this.accountInfo.areaLvl;
    if (f && f != 5) {
      this.formInline.statisticalType = "县分";
    } else {
      this.formInline.statisticalType = "支局";
    }
    this.getMonth();
    // 计算高度
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    handleSizeChange(val) {
        this.pageSize = val;
        const { tabActive, formInline } = this;
        const form = {
            ...formInline,
            areaFlag: 0,
        };
        this.getData(form);
    },
    handleCurrentChange(val) {
        this.pageNum = val;
        const { tabActive, formInline } = this;
        const form = {
            ...formInline,
            areaFlag: 0,
        };
        this.getData(form);
    },
    // 计算高度
    getHeight() {
      this.height =
        window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 140;
    },
    handle_export() {
      const { tabActive, exportParams1, exportParams2 } = this;
      this.export((tabActive == "list1" && exportParams1) || exportParams2);
    },

    handle_search() {
      const { tabActive, formInline } = this;
      const form = {
        ...formInline,
        areaFlag: 0,
      };
      this.getData(form);
    },

    export(params) {
      var form = {
        ...params,
        token: getCookie("token"),
      };
    //   window.open(
    //     `${url}/governmentCust/exportCustomerView?${qs.stringify(form)}`,
    //     "_self"
    //   );
      let fileName = "嘉兴政企收入视图 - " + this.formInline.month;
      downLoadTemplate(`${url}/governmentCust/exportCustomerView?${qs.stringify(form)}`,fileName)
    },

    getMonth() {
      const { formInline } = this;
      $budgetAPI.incomeKeepRegionalMonth(
        {
          maximum: 6,
        },
        (res) => {
          if (res.code == 0) {
            this.formInline.month = res.content;
            this.disabledTime = res.content;
            // this.checkMonth(res.content);
            this.getData(formInline);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    checkMonth(month) {
      var that = this,
        disabledMonth;

      that.monthList = [];
      if (
        that.tabActive == "list2" &&
        month.substr(0, 4) < new Date().getFullYear()
      ) {
        disabledMonth = 12;
      } else {
        disabledMonth = parseInt(that.disabledTime.substring(4));
      }
      for (let i = 0; i < disabledMonth; i++) {
        that.monthList.push({
          name: i + 1 + "月",
          value: "value" + (i + 1),
        });
      }
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },

    handleTabClick(name) {
      const { tableData1, tableData2, formInline } = this;
      if (name == "list2") {
        if (tableData2.length == 0) {
          const form = {
            ...formInline,
            areaId: this.accountInfo.areaId,
            hsxType: "",
            manageName: "", //客户经理
            vipNbr: "", //
            assets: "", //
            areaFlag: 0,
          };
          // Object.assign(this.formInline, form);
          this.getData(form);
        }
      }
    },

    selectChange(v) {
      if (v == 1) {
        document.title = "政企客户属性";
        this.formInline.indexCode = "";
        this.formInline.hsxType = "";
      } else {
        document.title = "政企服务属性";
        this.formInline.indexCode = "YS10000";
        this.formInline.hsxType = "";
      }
    },

    //表格中区域下钻
    goArea(row) {
      // console.log(row)
      const { tabActive, formInline } = this;

      if (tabActive == "list1") {
        var form = {
          ...formInline,
          areaId: row.areaId,
          manageName: row.manager_NAME,
          hsxType: row.hsx_TYPE,
          vipNbr: row.vip_NBR,
          areaFlag: 1,
        };
        if (row.area_LVL == 3 || row.area_LVL == 4) {
          form.statisticalType = "县分";
        } else if (row.area_LVL == 5 && row.manager_NAME == null) {
          form.statisticalType = "支局";
        } else if (row.manager_NAME != null && row.vip_NAME == null) {
          form.statisticalType = "客户经理";
        } else if (row.manager_NAME != null && row.vip_NAME !== null) {
          form.statisticalType = "VIP";
        }
      } else {
        var form = {
          ...formInline,
          areaId: row.areaId,
          manageName: row.manageName,
          hsxType: row.hsxType,
          vipNbr: row.vipNbr,
          areaFlag: 1,
        };
        if (row.areaLvl == 3 || row.areaLvl == 4) {
          form.statisticalType = "县分";
        } else if (row.areaLvl == 5 && row.manageName == null) {
          form.statisticalType = "支局";
        } else if (row.manageName != null && row.vipName == null) {
          form.statisticalType = "客户经理";
        } else if (row.manageName != null && row.vipName !== null) {
          form.statisticalType = "VIP";
        }
      }

      this.getData(form);
    },

    changeArea(val) {
      const { tabActive, formInline, areaList, areaList2 } = this;
      var form = {
        ...formInline,
        areaFlag: 1,
      };
      if (val.key == "manageName") {
        if (tabActive == "list1") {
          form.areaId = areaList[val.i - 1].value;
          form.manageName = val.value;
          form.vipNbr = null;
          form.statisticalType = "客户经理";
        } else {
          form.areaId = areaList2[val.i - 1].value;
          form.manageName = val.value;
          form.vipNbr = null;
          form.statisticalType = "客户经理";
        }
      } else if (val.key == "vipNbr") {
        if (tabActive == "list1") {
          form.areaId = areaList[val.i - 2].value;
          form.manageName = areaList[val.i - 1].value;
          form.vipNbr = val.value;
          form.statisticalType = "VIP";
        } else {
          form.areaId = areaList2[val.i - 2].value;
          form.manageName = areaList2[val.i - 1].value;
          form.vipNbr = val.value;
          form.statisticalType = "VIP";
        }
      } else {
        form.areaId = val.value;
        form.manageName = null;
        form.vipNbr = null;
        form.statisticalType = "支局";
      }
      this.getData(form);
    },

    getData(obj) {
      const { tabActive, formInline } = this;
      this.showTableLoading = true;
      let form;

      if (tabActive == "list1") {
        form = {
          ...obj,
          viewKey: "hz",
        };
      } else {
        form = {
          ...obj,
          viewKey: "other",
          month: formInline.month.substr(0, 4),
          pageNum:this.pageNum,
          pageSize: this.pageSize
        };
      }
      this.checkMonth(this.formInline.month);
      $budgetAPI.VIPRevenueBak(
        form,
        (res) => {
          if (res.code == 0) {
            this.hsxType_show = this.formInline.attrType == 2 ? true : false;

            if (tabActive == "list1") {
              this.exportParams1 = { ...form };
              let data = res.content;

              if (data.areaIds) {
                this.areaIds = data.areaIds && data.areaIds.split(",");
                this.areaNames = data.areaNames && data.areaNames.split("->");
                this.areaLvls = data.areaLvls && data.areaLvls.split(",");
                this.areaList.length = 0;
                this.areaIds.map((it, i) => {
                  var o = {
                    label: this.areaNames[i],
                    value: this.areaIds[i],
                    key: this.areaLvls[i],
                    i: i,
                  };
                  this.areaList.push(o);
                });
              } else {
                this.areaList.length = 0;
              }

              this.$refs.table1.reloadData(data.data);
              this.areaFlag = data.areaFlag && data.areaFlag;

              if ((data.statisticalType && data.statisticalType) == "县分") {
                this.isShow = false;
                this.isShowCustomer = false;
                this.isShowManName = false;
                this.isShowVip = false;
                this.isShowZc = false;
                this.list1Colums = incomeVipList1Columns;
              } else if (
                (data.statisticalType && data.statisticalType) == "客户经理"
              ) {
                this.isShow = true;
                this.isShowManName = true;
                this.isShowCustomer = true;
                this.isShowVip = false;
                this.isShowZc = false;
                this.list1Colums = incomeVipList1Columns;
              } else if (
                (data.statisticalType && data.statisticalType) == "支局"
              ) {
                this.isShow = true;
                this.isShowCustomer = false;
                this.isShowManName = false;
                this.isShowVip = false;
                this.isShowZc = false;
                this.list1Colums = incomeVipList1Columns;
              } else if (
                (data.statisticalType && data.statisticalType) == "VIP"
              ) {
                this.isShow = true;
                this.isShowCustomer = true;
                this.isShowManName = true;
                this.isShowVip = true;
                this.isShowZc = false;
                this.list1Colums = incomeVipList1Columns;
              } else if (
                (data.statisticalType && data.statisticalType) == "资产"
              ) {
                this.isShowZc = true;
                this.isShowCustomer = true;
                this.isShowManName = true;
                this.isShowVip = true;
                this.list1Colums = incomeVipList1Columns.filter((i) => {
                  return i.title.includes("同比增长率") == false;
                });
              }

              this.$forceUpdate();
            } else {
              this.exportParams2 = { ...form };
              let data = res.content;
              this.total = data.data[0].total
              if (data.areaIds) {
                this.areaIds2 = data.areaIds && data.areaIds.split(",");
                this.areaNames2 = data.areaNames && data.areaNames.split("->");
                this.areaLvls2 = data.areaLvls && data.areaLvls.split(",");
                this.areaList2.length = 0;
                this.areaIds2.map((it, i) => {
                  var o = {
                    label: this.areaNames2[i],
                    value: this.areaIds2[i],
                    key: this.areaLvls2[i],
                    i: i,
                  };
                  this.areaList2.push(o);
                });
              } else {
                this.areaList2.length = 0;
              }

              this.$refs.table2.reloadData(data.data);
              this.tableData2 = data.data;
              this.areaFlag2 = data.areaFlag && data.areaFlag;

              if ((data.statisticalType && data.statisticalType) == "县分") {
                this.isShow2 = false;
                this.isShowCustomer2 = false;
                this.isShowManName2 = false;
                this.isShowVip2 = false;
                this.isShowZc2 = false;
              } else if (
                (data.statisticalType && data.statisticalType) == "客户经理"
              ) {
                this.isShow2 = true;
                this.isShowManName2 = true;
                this.isShowCustomer2 = true;
                this.isShowVip2 = false;
                this.isShowZc2 = false;
              } else if (
                (data.statisticalType && data.statisticalType) == "支局"
              ) {
                this.isShow2 = true;
                this.isShowCustomer2 = false;
                this.isShowManName2 = false;
                this.isShowVip2 = false;
                this.isShowZc2 = false;
              } else if (
                (data.statisticalType && data.statisticalType) == "VIP"
              ) {
                this.isShow2 = true;
                this.isShowCustomer2 = true;
                this.isShowManName2 = true;
                this.isShowVip2 = true;
                this.isShowZc2 = false;
              } else if (
                (data.statisticalType && data.statisticalType) == "资产"
              ) {
                this.isShowZc2 = true;
                this.isShowCustomer2 = true;
                this.isShowManName2 = true;
                this.isShowVip2 = true;
              }

              this.$forceUpdate();
            }
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
          this.showTableLoading = false;
        },
        (err) => {
          this.showTableLoading = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.productView_container {
  width: 100%;
  height: 100%;
  .hover {
    cursor: pointer;
    color: #418ee9;
  }
  .num {
    cursor: pointer;
    &:hover {
      color: #418ee9;
    }
  }
  .clearNum {
    pointer-events: none;
  }
  & > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    height: 40px;
    margin: 0 -20px;
    padding: 0 20px;
    & > p {
      font-weight: bold;
      font-size: 15px;
    }
  }
  & > main {
    padding: 0 10px 10px;
    .main_searchBar {
      border-bottom: 1px solid #d6d9e5;
      /deep/ .el-form-item {
        margin: 6px 10px 6px 0;
      }

      button {
        color: #fff;
        border: none;
        outline: none;
        &:hover {
          opacity: 0.8;
        }
      }
      #search_btn {
        background-color: #2a90de;
      }
      #export_btn {
        background-color: #2cd531;
      }
    }
    .main_navBar {
      padding: 0 0 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .area {
        text-align: left;
        display: flex;
        .it {
          cursor: pointer;
          font-size: 14px;
          display: inline-block;
          .td {
            font-weight: bold;
            &:hover {
              color: #418ee9;
            }
          }
          &:last-child {
            span {
              &:last-child {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .el-table .cell {
  display: flex;
  white-space: pre-line;

  align-items: center;
}
.el-dropdown-link {
  display: flex;
  align-items: center;
}
// /deep/ .elx-table--header {
//   .headerStyle {
//     background: #eef1f6;
//   }
// }
.clearHover {
  pointer-events: none;
  color: #606266;
}
</style>
